<style lang="scss">
.batch-selecting {
  .el-table__row {
    user-select: none;
  }
}

.batch-select {
  .el-table__row {
    &.batch-row--selected {
      //background-color: var(--z-table-row-selected-bg, rgba(64, 158, 255, 0.1));
      //&:hover>td.el-table__cell {
      //  background-color: initial;
      //}
      >td.el-table__cell {
        background-color: var(--z-table-row-selected-bg, rgba(64, 158, 255, 0.1));
      }
      //&.hover-row>td.el-table__cell {
      //  background-color: var(--z-table-row-selected-bg, rgba(64, 158, 255, 0.1));
      //}
      &.el-table__row--striped> td.el-table__cell {
        background-color: var(--z-table-row-selected-bg, rgba(64, 158, 255, 0.1));
      }
    }
    &.current-row {
      &:hover>td.el-table__cell {
        background-color:  var(--z-table-row-selected-bg, rgba(64, 158, 255, 0.1));
      }
    }


    &.hover-row.current-row>td.el-table__cell,
    &.hover-row.el-table__row--striped.current-row>td.el-table__cell,
    &.hover-row.el-table__row--striped>td.el-table__cell,
    &.hover-row>td.el-table__cell {
      background-color:  var(--z-table-row-selected-bg-hover, rgba(64, 158, 255, 0.3));
    }



    td.el-table__cell{
      //transition: none;
    }

    //.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell
  }
}
</style>

<template>
  <div>
    <z-space vertical>
      <h3>表格扩展</h3>

      <div>
        <z-space>
          <div @click="getSelectedData">获取选中的ID</div>
          <div @click="cancelSelect">全部取消选择</div>
          <div @click="getUnSelect">获取未选中的ID</div>
        </z-space>
      </div>
<!--      :table-attrs="{selectable: true, sequence: false}"-->
      <z-crud-table ref="table" class="batch-select" :obj="obj"

      >
      </z-crud-table>
      <p>按住shift 拖拽选择</p>
      <h3>方法</h3>
      <doc-props :data="doc.methods" def-type="Methods"></doc-props>
<!--      <div  class="batch-select "-->
<!--            :id="tool.id"-->
<!--            v-batch-select="{ selector: tool.selector, selectIdxs: tool.state.selectIdxs }">-->
<!--        <z-table-->
<!--            ref="table"-->
<!--            :columns="columns" height="auto" :selectable="false"-->
<!--             :sequence="false"-->
<!--             :data="data" :pagination="false"-->
<!--            :row-class-name="tool.tableRowClassName"-->
<!--            @row-click=" tool.tableRowClick"-->
<!--        >-->
<!--          <template #column="scope">-->
<!--            <template v-if="scope.prop === 'TABLE_ROW_CHECK'">-->
<!--              <textarea class="el-table__row-check"-->
<!--                        style="height: 0"-->
<!--                        :data-uuid="scope.row.id"-->
<!--                   batch-select-dataset>{{scope.row}}</textarea>-->
<!--            </template>-->
<!--          </template>-->
<!--        </z-table>-->
<!--      </div>-->
    </z-space>
  </div>
</template>

<script>
import DocProps from "@example/plugins/example/components/DocProps";
import {useGridBatchSelect} from "../../../babel-static/hooks";
import {obj} from './base.jsx'

export default {
  components: {DocProps},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{columns: [], records: []}',
            desc: '定义'
          }
        ],
        methods: [
          {
            name: 'getSelectedUUIDS',
            desc: '获取选中的UUIDs',
            params: ''
          },
        ],
      },
      columns: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        },
        {
          label: '',
          prop: 'TABLE_ROW_CHECK',
          width: '1px',
          useSlot: true
        },
      ],
      data:  [{
        id: ZY.rid(),
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: ZY.rid(),
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: ZY.rid(),
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: ZY.rid(),
          date: '2016-05-01',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: ZY.rid(),
            date: '2016-05-01',
            name: '王小虎11',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: ZY.rid(),
            date: '2016-05-01',
            name: '王小虎12',
            address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: ZY.rid(),
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: ZY.rid(),
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableData1: [{
        id: ZY.rid(),
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: ZY.rid(),
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: ZY.rid(),
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: ZY.rid(),
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
    }
  },
  setup(props, ctx) {
    let tool = useGridBatchSelect(props, ctx)
    return {
      obj,
      tool
    }
  },
  methods: {
    getUnSelect() {
      // console.log(this.$refs.table.dataTable.getRecords())
      let ids = this.$refs.table.dataTable.getRecords().map(v => v.id)
      let res = ZY.lodash.difference(ids, this.$refs.table.getSelectedUUIDS() ?? [])
      console.log(res)
      return res;
    },
    getSelectedData() {
      console.log(this.$refs.table.getSelectedUUIDS())
    },
    cancelSelect() {
      this.$refs.table.cancelSelect()
    }
  }
}
</script>
